<template>
  <!-- 桌面端表格 -->
  <el-table
    v-if="!publicStore.isMobile"
    :data="tableData"
    class="table-box"
    height="100%"
    stripe
    fit
    border
    highlight-current-row
    :empty-text="tableLoading ? '加载中...' : '暂无数据'"
    :header-row-style="headerStyle"
  >
    <el-table-column
      v-for="col in tableHeaderData"
      :key="col.prop"
      v-bind="col"
    >
      <template v-if="col.prop === 'specificSituation'" #default="{row}">
        <el-button text type="primary" @click="checkComplaint(row)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 移动端表格 -->
  <div v-else class="mobile-table hx-scroll">
    <!-- 表头 -->
    <van-row class="table-header">
      <van-col
        v-for="(column, index) in tableHeaderData"
        :key="`header-${column.prop}`"
        class="table-col"
        :span="getColumnSpan(index)"
      >
        {{ column.label }}
      </van-col>
    </van-row>

    <!-- 表格内容 -->
    <template v-if="tableData.length">
      <van-row
        v-for="(row, rowIndex) in tableData"
        :key="`row-${rowIndex}`"
        class="table-content"
      >
        <van-col
          v-for="(column,columnIndex) in tableHeaderData"
          :key="`cell-${rowIndex}-${column.prop}`"
          class="table-col"
          :span="getColumnSpan(columnIndex)"
        >
          <template v-if="column.prop === 'specificSituation'">
            <el-button text type="primary" @click="checkComplaint(row)">查看详情</el-button>
          </template>
          <span v-else>{{ row[column.prop] }}</span>
        </van-col>
      </van-row>
    </template>
    <EmptyComp v-else description="暂无数据"></EmptyComp>
  </div>
</template>

<script setup>
import {computed} from "vue";
import {usePublicStore} from "@/stores/publicInfo.js";
import EmptyComp from "@/components/EmptyComp.vue";

const emit = defineEmits([
  'emitCheckComplaint'
])

const publicStore = usePublicStore();

const props = defineProps({
  tableData: {
    type: Array,
    default: () => []
  },
  tableHeaderData: {
    type: Array,
    default: () => []
  },
  tableLoading: {
    type: Boolean,
    default: false
  }
});

// 计算属性
const headerStyle = computed(() => ({
  fontWeight: 'bold',
  color: '#505050'
}));

const spanBase = computed(() => Math.floor(24 / props.tableHeaderData.length));
const lastSpan = computed(() => 24 - spanBase.value * (props.tableHeaderData.length - 1));

// 方法
const getColumnSpan = (index) =>
  index === props.tableHeaderData.length - 1 ? lastSpan.value : spanBase.value;

function checkComplaint(row) {
  emit('emitCheckComplaint', row)
}
</script>

<style scoped lang="scss">
.table-box {
  // 可以添加桌面端表格的特定样式
}

.mobile-table {
  width: 100%;
  height: 100%;
  overflow: auto;

  .table-header {
    font-weight: bold;
    color: #505050;
    background-color: #fef8f4;
    padding: 10px 4px;
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .table-content {
    padding: 10px 4px;
    border-bottom: 1px solid $font-color-gray-3;
    font-size: 12px;

    &:nth-child(even) {
      background-color: #f9f9f9;
    }
  }

  .table-col {
    padding: 0 2px;
    white-space: normal;
    word-break: break-all;
  }
}
</style>
